<template>
   <div class="detail">
     <!--顶部横条-->
     <Banner></Banner>
     <!--顶部横条-->


     <mainContent :catname="subject">
       <div slot="menu_list">
         <dl>
           <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}">{{subject}}</dt>
         </dl>
       </div>

       <div slot="inner_content" class="inner_content">

         <!--详情-->
         <div class="page_con" style="display: flex;flex-direction: column">
           <NoData v-if="flag"></NoData>
           <!--<NoData v-if="richText.length==0"></NoData>-->
          <div class="titles">{{title}}</div>
          <div class="lt_detail" v-html="richText"></div>
         </div>
         <!--详情-->
       </div>
     </mainContent>

     <footerBar></footerBar>
     <!--左侧漂浮菜单-->
     <MainMenu></MainMenu>
     <!--左侧漂浮菜单-->

   </div>
</template>

<script>
    import Banner from '../../components/bannder/Banner'
    import MainMenu from '../../components/mainmenu/MainMenu'
    import footerBar from '../../components/content/footerBar'
    import mainContent from '../../components/content/mainContent'
    import NoData from '@/components/nodata/NoData'
    export default {
        name: "detail",
        components:{
          Banner,
          MainMenu,
          footerBar,
          mainContent,
          NoData,
        },
        data(){
          return{
            id: '',
             richText:'',//富文本内容
            title:'',
            subject:'',//判断是从那个栏目跳转过来的详情
            menu_bg:'',
            flag:false,//判断是否显示暂无数据
          }
        },
        created(){
          this.menu_bg=this.$util.storage.get("menu_bg");
          console.log('this.$route:',this.$route);
          this.id = this.$route.query.id;
          console.log('id',this.id);
          this.getTitle();
          this.getRichText();
        },
        methods:{
           getTitle(){
             let that = this;
             that.subject=that.$route.query.name;
           },


            getRichText(){
              let that = this;
              that.$http.get("api/ScreenkApi/getArticleDetail?id="+that.id,null,r=>{
                console.log("莲塘动态：",r.data);
                that.richText=r.data.content;
                if (r.data.content.length==0) {
                  that.flag=true;
                }
                // console.log('字符串长度',this.richText.length);
                that.title=r.data.title;
              });
            },
        }



    }
</script>

<style scoped>
  .detail{
    width: 100vw;
    height: 1080px;
    box-sizing: border-box;
    background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;
  }
  .inner_content{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 60px !important;
    padding-left: 50px !important;
  }
  .page_con{
    font-size: 24px !important;
    padding-right: 0px !important;
    width: 1300px !important;
    box-sizing: border-box;
    height: 620px;

  }
  .lt_detail{
    /*height: 667px;*/
    /*width: 1620px;*/
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    /*padding-top: 60px;*/
    /*padding-left: 50px;*/
    /*padding-right: 50px;*/
    font-size: 30px;
    color: black;
    /*background:red;*/
  }
  .lt_detail >>>img{
    /*width: 100%;*/
    max-width: 100%;
  }
  .titles{
    color: black;
    height: 100px;
    width: 100%;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 23px;
    text-align: center;
    font-family: 微软雅黑;
  }



</style>
